<template>
	<view mt-4>
        <view bg-blue-200 p-4 rounded-lg @click="view_detail = !view_detail">
            <view flex flex-row gap-3>
                <view v-if="tasklist.worker && tasklist.worker_id != self.userInfo.id" flex flex-row gap-3>
                    <up-avatar :src="tasklist.worker.avatar" :size="50" shape="square"></up-avatar>
                    <view flex flex-col flex-1>
                        <text text-35>{{ tasklist.worker ?tasklist.worker.nickname:'??' }}</text>
                        <text text-30 text-gray-500>{{ tasklist.create_time}}</text>
                        <text text-30 text-gray-500 v-if="tasklist.end_time>0">{{ dateFormat(tasklist.end_time) }}</text>
                    </view>
                </view>
                <view v-else flex flex-row gap-3>
                    <up-avatar  :src="owner.avatar" :size="50" shape="square"></up-avatar>
                    <view flex flex-col flex-1>
                        <text text-30 text-gray-500 v-if="tasklist.end_time>0">{{ dateFormat(tasklist.end_time) }}</text>
                        <text text-35 v-else>{{ owner.nickname}}</text>
                        <text text-30 text-gray-500>{{ tasklist.create_time}}</text>
                    </view>
                </view>
                
                <view flex-1>
                    <view v-if="tasklist.status==2" flex justify-items-end justify-end><up-icon name="checkmark-circle-fill" color="#4caf50" size="30"></up-icon></view>
                    <view v-else flex justify-items-end justify-end><text p-2 bg-purple-500 rounded-full text-white tracking-wider font-bold text-30>{{ completeNum }}</text></view>
                </view>
            </view>
            <mprogress :percentage="completeRate" mt-4></mprogress>
        </view>
        <view v-if="view_detail">
        <view mb-2
            v-for="(item, index) in tasklist.tasks"
            :key="index" 
        >
            <view v-if="item.status < 2" class="item item-undo" @click="handleDo(item)">
                <view bg-violet-400 rounded-full w-60 h-45 text-30 border-6 border-solid border-violet-300 text-center color-white block>{{ index+1 }}</view>
                <view class="justify-start w-full">
                    <text text-35>{{ item.task }}</text>
                </view>
                <view v-if="item.status == 1" class="loading-dots items-right">
                    <view class="dot"></view>
                    <view class="dot"></view>
                    <view class="dot"></view>
                </view>
                <view v-else class="items-right w-40"></view>
            </view>
            <view v-else class="item item-done">
                <view bg-green-400 rounded-full w-60 h-45 text-30 border-6 border-solid border-green-300 text-center color-white>{{ index+1 }}</view>
                <view class="justify-start w-full flex flex-col">
                    <text text-35>{{ item.task }}</text>
                    <text text-24 text-gray-500>{{ dateFormat(item.complete_time) }} </text>
                </view>
                <view class="items-right">
                    <up-icon name="checkmark-circle" color="#4caf50" size="28"></up-icon>
                </view>
            </view>
        </view>
        </view>
	</view>
    <poptaskop v-if="optask" :show="showPopup" @close="showPopup=false" :task="optask" @update="handleUpTask"></poptaskop>
</template>

<script setup lang="ts">
import { defineProps,computed,ref, onMounted } from 'vue';
import { apiDelTask,apiStartTask } from '@/api/task';
import { TaskOpEvent } from '@/enums/taskEnums';
import { TaskList,Task } from '@/types/task';
import poptaskop from '../poptaskop/poptaskop.vue';
import { onReady } from '@dcloudio/uni-app';
import { dateFormat } from '@/utils/util';
import {useUserStore} from '@/stores/user'
const props = defineProps({
    tasklist: {
        type: Object as () => TaskList,
        required: true
    }
});

const showPopup = ref(false)
const optask = ref<Task|null>(null)
const view_detail = ref(true)

const self = useUserStore()

const owner = computed(()=>{
    return props.tasklist.owner?props.tasklist.owner:self.userInfo
})

const completeNum = computed(() => {
    return competeTaskNum()+"/"+props.tasklist.tasks.length
})

const completeRate = computed(() => {
    return (competeTaskNum()/props.tasklist.tasks.length)*100
})

const competeTaskNum = () => {
    return props.tasklist.tasks.filter(task => task.status > 1).length;
}

const handleDelete = (item: Task) => {
    uni.showModal({
        title: '提示',
        content: '确定要删除吗?',
        success: function (res) {
            if (res.confirm) {
                apiDelTask({ task_id: item.id,task_list_id: item.list_id}).then(() => {
                    uni.$u.toast('删除成功')
                    uni.$emit(TaskOpEvent.DELETE, item.id)
                }).catch((msg) => {
                    console.log(msg)
                    uni.$u.toast('删除失败:'+msg)
                })
            }
        }
    });
}

const handleDo = (item: Task) => {
    optask.value = item
    showPopup.value = true
}

const handleUpTask = (item: Task) => {
    console.log(item)
    showPopup.value = false
}

onReady(()=>{
    if(props.tasklist){
        view_detail.value = props.tasklist.status<2
    }
})
</script>
<style lang="scss" scoped>
.item{
    padding: 32rpx;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    column-gap: 32rpx;
    align-items: center;
    margin-top: 16rpx;
    margin-bottom: 16rpx;
    justify-content: flex-end;
    border-radius: 24rpx;   
}
.item-undo{
      --un-gradient-shape: to right;
  --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops);
  background-image: linear-gradient(var(--un-gradient));

    --un-gradient-from-position: 50%;

  --un-gradient-from: rgb(238 242 255 / var(--un-from-opacity, 1))
    var(--un-gradient-from-position);
  --un-gradient-to-position: 100%;
  --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to);



  --un-gradient-to: rgb(224 242 254 / var(--un-to-opacity, 1))
    var(--un-gradient-to-position);
}
.item-done{
      --un-gradient-shape: to right;
  --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops);
  background-image: linear-gradient(var(--un-gradient));

    --un-gradient-from-position: 50%;

  --un-gradient-from: rgb(247 247 247 / var(--un-from-opacity, 1))
    var(--un-gradient-from-position);
  --un-gradient-to-position: 100%;
  --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to);
  --un-gradient-to: rgb(224 242 254 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);
}

.loading-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rpx; /* 小点之间的间距 */
  height: 40rpx; /* 容器高度 */
}

/* 小点的基本样式 */
.dot {
  width: 10rpx;
  height: 10rpx;
  background-color: #102ed6; /* 小点颜色 */
  border-radius: 50%; /* 圆形 */
  animation: bounce 1.4s infinite ease-in-out; /* 动画 */
}

/* 为每个小点设置不同的动画延迟 */
.dot:nth-child(1) {
  animation-delay: 0s;
}
.dot:nth-child(2) {
  animation-delay: 0.2s;
}
.dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* 定义跳动动画 */
@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0); /* 初始位置 */
  }
  40% {
    transform: translateY(-20rpx); /* 向上跳动 */
  }
}
</style>